import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/checkpoint/dungeons.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/checkpoint/actions.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/checkpoint/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointFooterWidget extends StatefulWidget {
  CheckpointFooterWidget({Key key}) : super(key: key);

  _CheckpointFooterWidgetState createState() => _CheckpointFooterWidgetState();
}

class _CheckpointFooterWidgetState extends State<CheckpointFooterWidget> {
  int _select = 0;

  List<Widget> createItem(
      int len, int select, List<DungeonsGroups> groups, AppStateViewModel vm) {
    return List<Widget>.generate(len, (index) {
      var info = groups[index];
      return GestureDetector(
        onTap: () {
          setState(() {
            _select = index;
          });
          vm.yeXiuStateViewModel.checkpointStateViewModel
              .groupFunc(info?.groupId ?? 1);
        },
        child: Container(
          height: setRatio(55),
          width: setRatio(85),
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(index == select
                      ? imageUtilYeXiu(
                          'checkpoint/icon_checkpoint_footer_btn_select@3x')
                      : imageUtilYeXiu(
                          'checkpoint/icon_checkpoint_footer_btn@3x')))),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(
                info?.name ?? '',
                style: TextStyle(
                    fontFamily: FontFamily.PINGFANG,
                    fontWeight: FontWeightCustom.PF_Medium,
                    fontSize: setTextSp(13),
                    color: Color(0xFFFFFFFF)),
              ),
              Text(
                '${info.lowLevel}-${info.highLevel}',
                style: TextStyle(
                    fontFamily: FontFamily.PINGFANG,
                    fontWeight: FontWeightCustom.PF_Bold,
                    fontSize: setTextSp(11),
                    color: Color(0xFFFFFFFF)),
              ),
            ],
          ),
        ),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(
          state: store.state,
          yeXiuStateViewModel: YeXiuStateViewModel(
              checkpointStateViewModel: CheckpointStateViewModel(
                  groupFunc: (id) => store.dispatch(dungeonList(id)))));
    }, builder: (context, vm) {
      var dungeons = vm.state.yeXiuState.checkpointState.checkpointDungeons;
      var groups = dungeons?.groups;
      return Container(
          width: setRatio(375),
          height: setRatio(55),
          child: CupertinoScrollbar(
              child: ListView(
                  scrollDirection: Axis.horizontal,
                  children:
                      createItem(groups?.length ?? 0, _select, groups, vm))));
    });
  }
}
